import React, { Component, Fragment } from 'react';
import { diagramXML } from '../data/xml4';
import { BPMNViewer } from '../../../components';

// eslint-disable-next-line react/prefer-stateless-function
class Bpmn extends Component {
  // constructor(props){
  //     super(props);
  //     this.state = {
  //         nodeId: '',   // 选中的节点ID
  //     }
  // }

  // componentDidMount() {
  //     let viewer = new BpmnViewer({
  //         container: '#canvas',
  //         height: 1000
  //     });

  //     viewer.importXML(diagramXML, err => {
  //         if (err) {
  //             message.error('流程图加载失败！')
  //             return;
  //         }

  //         // 添加节点点击事件
  //         let eventBus = viewer.get('eventBus');
  //         eventBus.on('element.click', e => {
  //             this.setState({
  //                 nodeId: e.element.id
  //             })
  //         });

  //         // 删除 bpmn logo
  //         const bjsIoLogo = document.querySelector('.bjs-powered-by');
  //         while (bjsIoLogo.firstChild) {
  //             bjsIoLogo.removeChild(bjsIoLogo.firstChild);
  //         }
  //     });
  // }

  render() {
    return <BPMNViewer diagramXML={diagramXML} height={500} isOrder={true} onClick={(e) => console.log(e)} />;
  }
}

export default Bpmn;
